<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
    <script>
        <!--Start with first post-->
        let counter = 1;

        // Load posts 10 at a time
        const quantity = 20;

        // When DOM loads, render the first 20 posts
        document.addEventListener("DOMContentLoaded", load);
        document.addEventListener("click", event => {
            const element = event.target;
            if (element.className === 'hide') {
                // element.remove();
                // 删除父元素标签
                // element.parentElement.remove();
                element.parentElement.style.animationPlayState = 'running';
                element.parentElement.addEventListener("animationend", () => {
                    element.parentElement.remove();
                })
            }
        });

        // Load next set of posts
        function load() {
            console.log("loading");
            // Set start and end post numbers, and update counter
            const start = counter;
            const end = start + quantity - 1;
            counter = end + 1;


            // Creat New post
            fetch(`/posts/posts?start=${start}&end=${end}`)
                .then(response => response.json())
                .then(data => {
                    // console.log(data)
                    data.posts.forEach(add_post)
                })
        };

        // Add post to DOM
        function add_post(contents) {

            // Create new post
            const post = document.createElement('div');
            post.className = 'post';
            post.innerHTML = `${contents} <button class = "hide"> Hide</button>`;

            document.querySelector('#posts').append(post);
        };

        // 滚动事件
        window.onscroll = () => {
            // 一定程度避免请求多次发送
            if (document.body.offsetHeight - window.innerHeight - window.scrollY >= 0) {
                if (document.body.offsetHeight - window.innerHeight - window.scrollY <= 10) {
                    console.log(document.body.offsetHeight - window.innerHeight - window.scrollY)
                    // document.querySelector('body').style.background = 'DarkViolet';  // 深紫罗兰
                    load();
                }
            }
        }

    </script>
    <style>
        .post {
            width: 100%;
            height: 50px;
            margin-top: 5px;
            background: bisque;
            border-radius: 20px;
            text-align: center;
            line-height: 50px;
            animation-name: hide;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            animation-play-state: paused;
        }

        @keyframes hide {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 0;
                height: 0;
                /*line-height: 0px;*/
                padding: 0px;
                margin: 0px;
            }
        }


        .hide {
            float: right;
            height: 30px;
            margin-top: 10px;
            margin-right: 50px;
            border: none;

            border-radius: 10px;
        }
    </style>
</head>
<body>
<h1>Scroll</h1>
<div id="posts"></div>
</body>
</html>